<template>
  <div class="home-content">
    <div class="header">
      <div class="mapmask" @touchmove.prevent v-show="showmap == 1">
        <img
          src="@/assets/img/delete@2x.png"
          class="mapclose animated"
          :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
          v-show="showmap == 1"
          @click="closemap"
        >
        <div
          id="allmap"
          class="mymap animated"
          v-show="showmap == 1"
          :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
        ></div>
        <!-- <div
          id="allmap"
          :style="mapStyle"
          class="animated"
          :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
          v-show="showmap == 1"
        ></div>-->
        <!--<div @click="reloadmap">
          <img
            src="@/assets/img/shuaxin@2x.png"
            class="reload animated"
            :class="{'bounceInRight':mapA,'bounceOutRight':mapB}"
            v-show="showmap == 1"
          >
        </div>-->
      </div>
      <div class="jiushibox header">
        <div @click="showbox">
          <van-icon name="manager" size="0.7rem"/>
        </div>
        <div class="location" @click="showmapdig">
          <img src="@/assets/img/icon_sy_dz.png" class="position-icon">
          <span style="font-size: 12px;">{{ city }}</span>
        </div>
        <span style="padding-left: 1rem;font-size: 0.4rem;">首页</span>
        <!--<div></div>-->
        <div @click="tosystemmes">
          <van-icon name="bell" size="0.7rem" :info="outtimeinfo"/>
        </div>
      </div>
    </div>
    <div class="jiushibox">
      <div class="homeheader">
        <div class="flex">
          <div class="tex">已完成订单收入: {{ zongmoney }}</div>
          <div class="texa">今日订单收入: {{ daymoney }}</div>
        </div>
        <div class="homeheaderbox">
          <div class="headertit" style="background:#f8aaaa">当月完成订单数量</div>
          <div class="headcon">
            <span>{{ ordernumm }}</span>
          </div>
        </div>
        <div class="homeheaderbox">
          <div class="headertit" style="background:#f9d981">今日完成订单数量</div>
          <div class="headcon">
            <span>{{ ordernumtoday }}</span>
          </div>
        </div>
        <div class="homeheaderbox">
          <div class="headertit" style="background:#9ac2fa">待接单数量</div>
          <div class="headcon">
            <span>{{ newordernum }}</span>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div v-for="(item,index) in items" :key="index" class="shoporderlist">
          <div class="shoplistbox">
            <div class="orderno">订单编号：{{ item.orderInfoId }}</div>
            <div class="orderbottombox">
              <div class="orderdesc">
                <p class="orderusername">{{ item.userName }}</p>
                <p class="orderaddress">地址：{{ item.address }}</p>
                <p class="ordername">店铺名：{{ item.dinName }}</p>
                <p class="ordername">联系电话：{{ item.phone }}</p>
                <!-- <p style="color:red" v-if="active == 0">注：超过五分钟没有接单，默认为拒绝接单。</p> -->
              </div>
              <!-- <div class="orderbtngrounp" v-if="active == 0">
                        <div class="yesbtn">确认接单</div>
                        <div class="nobtn">拒绝接单</div>
                    </div>
                    <div class="orderbtngrounp" v-if="active == 1">
                        <div class="yesbtn">配送</div>
              </div>-->
              <div class="btnbox">
                <div class="yuanan">
                  <div class="yuanbtn" @click="Suk_qiang(index)">抢单</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div>{{kuang}}</div>-->
    <van-popup v-model="show" position="left" :overlay="true" class="showbbox">
      <div class="topbg">
        <div class="headerbox">
          <img src="@/assets/img/img_tx_grzx.png" class="headerimg">
        </div>
        <p class="headername">{{ username }}</p>
        <div class="main">
          <div class="mainbox boxjiushi" @click="tosystemmes">
            <div class="mainfbox">
              <img src="@/assets/img/icon_wd_xtxx.png" class="mainicon">
              <span>系统消息</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi" @click="toorders">
            <div class="mainfbox">
              <img src="@/assets/img/icon_wd_wddd.png" class="mainicon">
              <span>我的订单</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi" @click="towallet">
            <div class="mainfbox">
              <img src="@/assets/img/icon_wd_wdqb.png" class="mainicon">
              <span>我的钱包</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi" @click="tocenter">
            <div class="mainfbox">
              <img src="@/assets/img/icon_wd_szzx.png" class="mainicon">
              <span>设置中心</span>
            </div>
            <!-- <img src="@/assets/img/icon_g rzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi" @click="togoodbad">
            <div class="mainfbox">
              <img src="@/assets/img/icon_wd_jcjl.png" class="mainicon">
              <span>奖惩记录</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi" @click="Suk_touser">
            <div class="mainfbox">
              <img src="@/assets/img/icon_grzx_qhzt.png" class="mainicon">
              <span>回到客户端</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-icon name="arrow" size="0.5rem"/>
          </div>

          <div class="mainbox boxjiushi">
            <div class="mainfbox">
              <img src="@/assets/img/wxrideicon.png" class="mainicon">
              <span>我的工作</span>
            </div>
            <!-- <img src="@/assets/img/icon_grzx_xl.png" class="righticon"> -->
            <van-switch :value="checked" @input="onInput"/>
          </div>

          <!--<div class="mainbox boxjiushi">
            <div class="mainfbox">

              <span>已完成订单收入</span>
              <span style="color: #323233;">{{zongmoney}}</span>
            </div>
          </div>

          <div class="mainbox boxjiushi">
            <div class="mainfbox">

              <span>今日订单收入</span>
              <span style="color: #323233;">{{daymoney}}</span>
            </div>
          </div>-->
        </div>
      </div>
    </van-popup>
    <div class="noimgbox" v-if="noimg">
      <img src="@/assets/img/none.png">
    </div>
    <van-popup v-model="showchange">
      <div class="shopchangebox">
        <img src="@/assets/img/wxusericon.png">
        <!-- <img src="@/assets/img/wxshopicon.png" v-if="userstatus == 2" @click="Suk_to"> -->
        <!-- <img src="@/assets/img/wxrideicon.png" v-if="userstatus == 1" style="margin-left:0.3rem;"> -->
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true, //这是我们的开工开关
      userstatus: localStorage.getItem("userstatus"), //这是获取我们的用户状态
      showchange: false, //展示我的切换用户
      noimg: false,
      outtimeinfo: null,
      ordernumm: 0,
      ordernumtoday: 0,
      newordernum: 0,
      show: false,
      username: "admin",
      items: [],
      itemsold: [],
      timer: '',
      zongmoney: '',
      daymoney: '',
      city: "",
      mapA: true,
      mapB: false,
      showmap: 0,
      Citya: '',
      kuang: {}
    };
  },
  beforeCreate: function () {
    //创建前
  },
  activated() {
    this.Suk_getlist();
    this.Suk_outtime();
  },
  created: function () {
    //创建后
    this.Suk_getlist();
    this.Suk_outtime();
    this.Suk_getridework();
    localStorage.setItem("logintp", 'ride');
  },
  beforeMount: function () {
    //挂载前
  },
  mounted: function () {
    //挂载后
  },
  beforeUpdate: function () {
    //更新前
  },
  update: function () {
    //更新后
  },
  mounted() {
    this.timer = setInterval(this.Suk_getlist, 5000);
    this.loadmap();
    this.android_location();
  },
//beforeDestroy(){
//	clearInterval(this.timer);
//},
  methods: {
    onInput(checked) {
      let that = this;
      if (that.checked == true) {
        that.$dialog
          .confirm({
            title: "提醒",
            message: "是否结束工作？"
          })
          .then(() => {
            that.$toast.loading({
              message: "加载中..."
            });
            let Sukdata = {
              userId: localStorage.getItem("userid"),
              type: 2
            };
            console.log(Sukdata);
            that.axios
              .post(
                that.baseUrl + "/riding/update1",
                that.Qs.stringify(Sukdata),
                {
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  }
                }
              )
              .then(function (res) {
                if (res.request.status === 200) {
                  if (res.data.meta.code == 200) {
                    console.log(res.data);
                    that.Suk_getridework();
                    that.$toast.clear();
                  } else if (res.data.meta.code == 501) {
                  }
                }
              });
          });
      } else if (that.checked == false) {
        that.$dialog
          .confirm({
            title: "提醒",
            message: "是否开始工作？"
          })
          .then(() => {
            that.$toast.loading({
              message: "加载中..."
            });
            let Sukdata = {
              userId: localStorage.getItem("userid"),
              type: 1
            };
            console.log(Sukdata);
            that.axios
              .post(
                that.baseUrl + "/riding/update1",
                that.Qs.stringify(Sukdata),
                {
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  }
                }
              )
              .then(function (res) {
                if (res.request.status === 200) {
                  if (res.data.meta.code == 200) {
                    console.log(res.data);
                    that.Suk_getridework();
                    that.$toast.clear();
                  } else if (res.data.meta.code == 501) {
                  }
                }
              });
          });
      }
    },

//  地图
    showmapdig() {
      let that = this;
      window.scrollTo(0, 0);
      that.showmap = 1;
    },
    android_location() {

      let that = this;
      dsBridge.call("getLocation");
      dsBridge.register("setLocation", function (data) {
        that.kuang = data

        that.city = JSON.parse(data).District;
//    	alert(that.city);
        that.Citya = JSON.parse(data).City;
//    	alert(that.Citya)
        that.getnoimg(that.Citya);
//    	alert(that.shi)
//         alert(JSON.parse(data).City);
        let str = JSON.parse(data);
//      that.city = str.District;
//      alert(that.city)
        localStorage.setItem("city", str.City);
        localStorage.setItem("long", str.longitude);
        localStorage.setItem("lat", str.latitude);
        // localStorage.setItem("long", 114.498424)
        // localStorage.setItem("lat", 36.600709)
        // confirm(that.longLat);
      });

    },
    tomylocation() {
      var marker = new AMap.Marker({
        position: [localStorage.getItem("long"), localStorage.getItem("lat")]
      });
      map.add(marker);
    },
    // 这是我们的高德地图
    loadmap() {
      const map = new AMap.Map("allmap", {
        zoom: 15,
        center: [localStorage.getItem("long"), localStorage.getItem("lat")] //中心点坐标
      });
      var marker = new AMap.Marker({
        position: [localStorage.getItem("long"), localStorage.getItem("lat")]
      });
      map.add(marker);
      // AMapUI.loadUI(...) //加载UI组件
    },
    // 下面的是关闭地图的操作
    closemap() {
      let that = this;
      that.mapA = false;
      that.mapB = true;
      setTimeout(() => {
        that.showmap = 0;
        that.mapA = true;
        that.mapB = false;
      }, 800);
    },
    // 下面的是刷新地图的操作
    reloadmap() {
      this.ready();
    },

    Suk_touser() {
      let that = this;
      localStorage.removeItem("logintp")
      that.$router.push({
        name: "user"
      });
    },
    // 下面的是抢单事件
    Suk_qiang(index) {
      let that = this;
      console.log(index);
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        ridinId: localStorage.getItem("userid"),
        orderInfoId: that.items[index].orderInfoId
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/ridingOrder/updateRidin",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              if (res.data.data == "商家未接单") {

                that.$toast.success({
                  message: "商家未接单！抢单失败"
                });
              } else {
                that.$toast.success({
                  message: "已抢单！"
                });
              }
              that.Suk_getlist();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 下面的是我们的系统超时提醒
    Suk_outtime() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/log/addOvertime", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              let num = 0;
              for (let i = 0; i < res.data.data.length; i++) {
                if (res.data.data[i].counts == 0) {
                  num++;
                  that.outtimeinfo = num;
                }
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 下面的是获取订单信息
    Suk_getlist() {
      let that = this;
//    that.$toast.loading({
//      message: "加载中..."
//    });
      var Sukdata = {
        longitude: localStorage.getItem("long"),
        latitude: localStorage.getItem("lat"),
        address: localStorage.getItem("city"),
        rinId: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/ridingOrder/queryAllRiding",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data.data, "抢单list");
              that.ordernumm = res.data.data.daijiedanshuliang;
              that.ordernumtoday = res.data.data.jinrishouru;
              that.newordernum = res.data.data.zongshouru;
              that.daymoney = res.data.data.daymoney;
              that.zongmoney = res.data.data.zongmoney;

              that.items = res.data.data.addlist;
              if (that.items.length > that.itemsold.length && that.itemsold.length!=0) {

                let Sukdata2 = {
                  userId: localStorage.getItem("userid")
                };
                that.axios
                  .post(
                    that.baseUrl + "/ridingOrder/updateXin",
                    that.Qs.stringify(Sukdata2),
                    {
                      headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                      }
                    }
                  )
                  .then(function (res) {
                    if (res.request.status === 200) {

                    }
                  });


              }
              that.itemsold = res.data.data.addlist;
              that.noimg = false;
              that.$toast.clear();
            } else if (res.data.meta.code == 500) {
              that.noimg = true;
              that.items = []
            }
          }
        });
    },
    // Suk_getrideorder() {
    //   let that = this;
    //   that.$toast.loading({
    //     message: "加载中..."
    //   });
    //   var Sukdata = {};
    //   console.log(Sukdata);
    //   that.axios
    //     .post(
    //       that.baseUrl + "/ridingOrder/myOrderList",
    //       that.Qs.stringify(Sukdata),
    //       {
    //         headers: {
    //           "Content-Type": "application/x-www-form-urlencoded"
    //         }
    //       }
    //     )
    //     .then(function(res) {
    //       if (res.request.status === 200) {
    //         if (res.data.meta.code == 200) {
    //           console.log(res.data);
    //           that.$toast.clear();
    //         } else if (res.data.meta.code == 501) {
    //         }
    //       }
    //     });
    // },
    // 下面的是获取我们的工作状态
    Suk_getridework() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      let Sukdata = {
        userId: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/riding/addRidingOneStatus",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              if (res.data.data.start_finish == 1) {
                that.checked = true;
              } else {
                that.checked = false;
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    tochange() {
      let that = this;
      that.showchange = true;
      // this.$router.push({
      //   name: "change"
      // });
    },
    // 下面的是到我们的钱包里去
    towallet() {
      this.$router.push({
        name: "ridewallet"
      });
    },
    tosystemmes() {
      this.$router.push({
        name: "systemmes"
      });
    },
    // 下面的是到我们的设置中心
    tocenter() {
      this.$router.push({
        name: "ridecenter"
      });
    },
    // 下面的是去我们的订单里
    toorders() {
      this.$router.push({
        name: "rideorders"
      });
    },
    // 这里是但我们的奖惩页面
    togoodbad() {
      this.$router.push({
        name: "goodbad"
      });
    },
    showbox() {
      let that = this;
      that.show = !that.show;
    }
  }
};
</script>
<style lang="scss" scoped>
.home-content {
  background: #f4f4f4;
  padding-bottom: 12rem;
  //   padding-top: 0.3rem;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #fff;
  height: 1.3rem;
  line-height: 1.3rem;
  margin-bottom: 0.3rem;
  align-items: center;

  div {
    line-height: 1.3rem;
    display: flex;
    font-size: 0.5rem;
  }
}

.homeheaderbox {
  display: inline-block;
  width: 32%;
  font-size: 0.3rem;

  .headertit {
    height: 1.28rem;
    line-height: 1.28rem;
    text-align: center;
    border-top-right-radius: 0.6rem;
    border-top-left-radius: 0.2rem;
  }

  .headcon {
    height: 1.3rem;
    background: #fff;
    text-align: center;
    line-height: 1.3rem;
  }
}

.jiushibox {
  width: 90%;
  margin: 0 auto;
}

.ordertab {
  color: #fe9a0f;
}

.shoporder-content {
  font-size: 0.3rem;
  background: #f4f4f4;
  padding-bottom: 6rem;
}

.shoporderlist {
  width: 100%;
  border-radius: 0.11rem;
  border-left: 0.1rem solid #31a8ac;
  margin: 0 auto;
  background: #fff;
  margin-top: 0.3rem;

  .shoplistbox {
    width: 90%;
    margin: 0 auto;

    .orderdesc {
      display: inline-block;
      width: 70%;

      .orderusername {
        font-size: 0.6rem;
      }
    }

    .orderno {
      border-bottom: 1px dotted #919191;
      height: 1rem;
      line-height: 1rem;
      color: #000;
    }
  }
}

.orderbottombox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.3rem;
}

.orderbtngrounp {
  display: inline-block;
  text-align: center;

  .yesbtn {
    width: 2.267rem;
    height: 0.9rem;
    background: #fe9a0f;
    text-align: center;
    line-height: 0.9rem;
    color: #fff;
    border-radius: 0.1rem;
  }

  .nobtn {
    width: 2.267rem;
    height: 0.9rem;
    background: #8a8a8a;
    text-align: center;
    line-height: 0.9rem;
    color: #fff;
    border-radius: 0.1rem;
    margin-top: 0.55rem;
  }
}

.orderaddress {
  overflow: hidden;
  text-overflow: ellipsis;
}

.yuanan {
  width: 1.7rem;
  height: 1.7rem;
  background: rgba(247, 146, 30, 0.3);
  animation: myfirst 0.5s;
  animation-direction: alternate;
  -webkit-animation-direction: alternate; /* Safari 和 Chrome */
  animation-iteration-count: infinite;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes myfirst {
  0% {
    background: rgba(247, 146, 30, 0.3);
  }
  16% {
    background: rgba(247, 146, 30, 0.4);
  }
  34% {
    background: rgba(247, 146, 30, 0.5);
  }
  60% {
    background: rgba(247, 146, 30, 0.6);
  }
  80% {
    background: rgba(247, 146, 30, 0.7);
  }
  100% {
    background: rgba(247, 146, 30, 0.8);
  }
  // 100% {background: rgba(247, 146, 30, 1);}
}

@-moz-keyframes myfirst /* Firefox */
{
  0% {
    background: rgba(247, 146, 30, 0.3);
  }
  16% {
    background: rgba(247, 146, 30, 0.4);
  }
  34% {
    background: rgba(247, 146, 30, 0.5);
  }
  60% {
    background: rgba(247, 146, 30, 0.6);
  }
  80% {
    background: rgba(247, 146, 30, 0.7);
  }
  100% {
    background: rgba(247, 146, 30, 0.8);
  }
  // 100% {background: rgba(247, 146, 30, 1);}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
  0% {
    background: rgba(247, 146, 30, 0.3);
  }
  16% {
    background: rgba(247, 146, 30, 0.4);
  }
  34% {
    background: rgba(247, 146, 30, 0.5);
  }
  60% {
    background: rgba(247, 146, 30, 0.6);
  }
  80% {
    background: rgba(247, 146, 30, 0.7);
  }
  100% {
    background: rgba(247, 146, 30, 0.8);
  }
  // 100% {background: rgba(247, 146, 30, 1);}
}

@-o-keyframes myfirst /* Opera */
{
  0% {
    background: rgba(247, 146, 30, 0.3);
  }
  16% {
    background: rgba(247, 146, 30, 0.4);
  }
  34% {
    background: rgba(247, 146, 30, 0.5);
  }
  60% {
    background: rgba(247, 146, 30, 0.6);
  }
  80% {
    background: rgba(247, 146, 30, 0.7);
  }
  100% {
    background: rgba(247, 146, 30, 0.8);
  }
  // 100% {background: rgba(247, 146, 30, 1);}
}

.yuanbtn {
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(247, 146, 30, 1);
  border-radius: 50%;
  line-height: 1.5rem;
  text-align: center;
  color: #fff;
  font-size: 0.4rem;
}

.showbbox {
  width: 60%;
  height: 100%;
}

.topbg {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
      right top,
      rgb(241, 157, 48),
      rgb(167, 139, 114)
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
      bottom left,
      rgb(241, 157, 48),
      rgb(167, 139, 114)
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
      bottom left,
      rgb(241, 157, 48),
      rgb(167, 139, 114)
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(
      to bottom left,
      rgb(241, 157, 48),
      rgb(167, 139, 114)
  ); /* 标准的语法 */
}

.headerbox {
  text-align: center;
  margin-top: 1.6rem;
}

.headerimg {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.headername {
  text-align: center;
  margin-top: 0.2rem;
  font-size: 0.5rem;
  color: #fff;
}

.main {
  color: #fff;
  width: 90%;
  margin: 0 auto;

  .mainfbox {
    display: inline-block;
  }

  .mainbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 0.5rem;
  }

  .mainicon {
    width: 0.65rem;
    height: 0.65rem;
    vertical-align: middle;
  }

  span {
    display: inline-block;
    font-size: 17px;
    line-height: 17px;
    height: 100%;
    vertical-align: middle;
    line-height: 100%;
    margin-left: 15px;
  }

  .righticon {
    width: 0.2rem;
    height: 0.4rem;
  }
}

.noimgbox {
  width: 100%;

  img {
    width: 100%;
  }
}

.shopchangebox {
  display: flex;

  img {
    width: 2rem;
    height: 2rem;
  }
}

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.tex {
  width: 50%;
  text-align: center;
  font-size: 0.5;
  background: #ccf39b;
  padding: 0.3rem 0;
  margin-bottom: 0.2rem;
  border-radius: 15px;
  margin-right: 0.1rem;
}

.texa {
  width: 50%;
  text-align: center;
  font-size: 0.5;
  background: #abeadc;
  padding: 0.3rem 0;
  margin-bottom: 0.2rem;
  border-radius: 15px;
  margin-left: 0.1rem;
}

.location {
  display: inline-block;
}

.position-icon {
  width: 17px;
  height: 21px;
  vertical-align: middle;
  margin-top: 0.3rem;
  margin-right: 0.2rem;
  /*margin-left: -2rem;*/
}

.mapmask {
  position: absolute;
  z-index: 998;
  top: 0;
  width: 100%;
  height: 20rem;
  background: rgba($color: #000000, $alpha: 0.4);
}

.mapclose {
  position: absolute;
  z-index: 999;
  width: 0.8rem;
  height: 0.8rem;
  right: 5%;
  top: 2rem;
}

#allmap {
  margin-top: 2rem;
  width: 300px;
  height: 200px;
  margin-left: 0.5rem;
  /*padding-bottom: 2rem;*/
}

.reload {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 0.8rem;
  top: 9.5rem;
  z-index: 999;
}
</style>
